<template>
    <div class="goodcook-container">
        <h1>精品好菜</h1>
        <van-grid :border="false" :column-num="2">
            <van-grid-item v-for="item in listStore.filterList(10)" class="items">
                <van-image :src="item.img" />
                <h3>{{ item.name }}</h3>
                <div>{{ item.all_click }}浏览 {{ item.favorites }}收藏</div>
            </van-grid-item>
        </van-grid>
    </div>
</template>

<script setup>
import useListStore from '@/store'
const listStore = useListStore()

</script>

<style lang="scss" scoped>
.goodcook-container {
    background-color: #fff;
    margin-top: 20px;
  
    h1 {
        font-weight: 400;
        font-size: 16px;
        color: #666;
        padding-left: 10px;
        margin: 0;
        padding: 0;
    }

    .items {
        h3 {
            font-weight: 400;
            font-size: 18px;
            color: #000;
            margin-bottom: 5px;
        }
        div {
            font-size: 14px;
            color: #999;
        }
    }

    .items:last-child ::v-deep(.van-image) {
        display: none;
    }


}</style>